<template>
	<div>
		<transition
			enter-active-class='animated zoomInUp'
			leave-active-class='animated zoomOutDown'
		>
			<div class='model-sure animated model-animate' v-if='modelSure'>
				<div class='model-sure-content'>
					<h1 style='padding: 15px;font-size: 18px;color:red;'>提示</h1>
					<p style='text-align:center;padding:5px 0;font-size:16px;'>恭喜您即将获得珠宝免费礼品劵？</p>
					<div class='btn' style='margin-top:15px;'>
						<div style='background:#eb2359;' @click='linqu'>确定</div>
						<div style='background:rgba(58,142,230,.5);' @click='modelSure=false'>取消</div>
					</div>
				</div>	
			</div>
		</transition>
		
		<div class='activity-card'>
			<p>{{random}}</p>
		</div>
		<div class='linqu-btn' v-if='!state' @click='linqu'>
			免费领取
		</div>
		<div v-else class='linqu-btn' style='background:#eee;'>
			已经领取
		</div>
		<div style='padding:0 20px'>
			<div class='zhuanshi'></div>
		</div>
		<div class='change-liping'></div>
		<div class='change-xq3'></div>
		<div class='change-xq4'></div>
		<div style='padding:0 20px'>
			<div class='zhuanshi'></div>
		</div>
		<div style='padding:15px;margin-top:20px;'>
			<div class='ol'>
				<h1>礼品劵使用说明</h1>
				<p>1. 每位客户仅有一次兑换机会，且每张劵仅限兑换一次；</p>
				<p>2. 礼品劵不兑换现金；</p>
				<p>3. 礼品劵最终解释权归周至福珠宝所有；</p>
				<p>4. 周至福珠宝联系电话：4000236283；</p>
				<p>5. 活动最终解释权归趣动俱乐部所有；</p>
				<p>6. 活动有效时间：2018-06-20至2018-07-31</p>
			</div>
		</div>
		<div style='padding:15px;margin-top:35px;'>
			<div class='ol'>
				<h1>领取地址</h1>
				<div>
					<p>周至福珠宝沙坪坝店</p>
					<p style='color:#999;'>沙坪坝黄金珠宝名表城（三峡广场新华书店1楼）</p>
				</div>
				<div>
					<p>周至福珠宝南岸店</p>
					<p style='color:#999;'>南岸区南坪惠工路3号周至福珠宝城（南坪步行街）</p>
				</div>
				<div>
					<p>周至福珠宝沙江北店</p>
					<p style='color:#999;'>江北区观音桥步行街大融城1楼周至福珠宝</p>
				</div>
				<div>
					<p>周至福珠宝渝中店</p>
					<p style='color:#999;'>渝中区解放碑民权路27号新华国际10楼</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {URL_ACTIVITY,URL_SURELIPIN,_layer} from '@/comm.js';
	export default {
		data(){
			return ({
				random:'',
				state:false,
				modelSure:false,
			});
		},
		mounted(){
			$('body').css('background','white');
		},
		created(){
			 this.linquInfo();
		},
		methods:{
			linqu(){
				let This=this;
				if(!this.modelSure){
					this.modelSure=true;
					return ;
				}
				$.post(URL_SURELIPIN,function(data){
					if(data.retult){
						_layer('恭喜您已成功获得珠宝免费礼品劵');
						This.linquInfo();
					}else{
						This.modelSure=false;
						_layer(data.message);
					}
				});
			},
			linquInfo(){
				let This=this;
				$.post(URL_ACTIVITY,function(data){
			        if(data.retult){
			            This.state=data.data.state;
			            This.random=data.data.random;
			        }else{
			            _layer('领取数据拉取失败');
			        }
			    });
			}
		}
	}
</script>

<style scoped>
    .animated {
	  animation-duration: .4s;
	  animation-fill-mode: both;
	}
	.activity-card{
		height: 200px;
		background: url('../../../static/img/linqu-card.jpg') no-repeat;
		background-size: 100% 100%;
	}
	.activity-card > p {
		padding-top: 95px;
	    text-align: center;
	    font-size: 30px;
	    letter-spacing: 2px;
	}
	.linqu-btn{
		width:100px;
		margin: 35px auto 0 auto;
		padding:12px 30px;
		background: #a81d38;
		text-align: center;
		color:white;
		border-radius: 50px;
	}
	.zhuanshi{
		height:55px;
		margin:40px 0;
		background: url('../../../static/img/bar.png') no-repeat center center;
		background-size: 100% 100%;
	}
	.change-liping{
		height:600px;
		background: url('../../../static/img/liping-renxuan.png') no-repeat;
		background-size: 100% 100%; 
	}
	.change-xq3{
		height:600px;
		margin-top:35px;
		background: url('../../../static/img/xq3.png') no-repeat;
		background-size: 100% 100%; 
	}
	.change-xq4{
		height:600px;
		margin-top:35px;

		background: url('../../../static/img/xq4.png') no-repeat;
		background-size: 100% 100%; 
	}
	.ol{
		padding: 15px;
		border:1px solid rgba(168,29,56,.48);
	}
	.ol > h1{
		padding: 15px 0;
	    color: #A81D38;
	    font-size: 16px;
	}
	.ol  p{
		line-height: 23px;
	}
	.ol > div{
		margin-top: 15px;
	}
	.model-sure{
		position: fixed;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,.5);
	}
	.model-sure .model-sure-content{
	    width: 300px;
	    height: 135px;
	    margin: 150px auto;
	    background: white;
	    box-shadow: 0 0 10px #ff9d0099;
	}
	.model-sure .btn > div{
		float: right;
		padding: 10px 20px;
    	margin-right: 10px;
    	color:white;
	}
</style>